@use '../../../variables';
@use '../../../../../styles/mixins';

$block: '.#{variables.$ns}table';

#{$block} {
    &__sort {
        display: inline-flex;
        align-items: center;
        gap: var(--g-spacing-1);
        // `top` to avoid redundant height to appear
        vertical-align: top;
        cursor: pointer;
        user-select: none;
        border-radius: var(--g-border-radius-xs);

        &-indicator {
            display: flex;
            flex-shrink: 0;
            color: var(--g-color-text-hint);
        }

        &_active &-indicator {
            color: var(--g-color-text-primary);
        }

        &:focus-visible {
            @include mixins.focus-outline();
        }
    }
}
